<template>
	<div>
		<div class="aid">
			<div class="base">
				<p class="fixed-top">
					上传附件
					<a-icon @click="closeFunction" type="close" />
				</p>
				<div class="main">
					<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }" @submit="handleSubmit">
						<a-form-item label="附件名称"><a-input v-decorator="['FileName', { rules: [{ required: true, message: '附件名称不能为空' }] }]" /></a-form-item>
						<a-form-item label="附件">
							<a-upload
								v-decorator="['Ico', { rules: [{ required: true, message: '附件不能为空' }] }]"
								:action="requestUrl + 'Common/DoUploadFile?type=file'"
								:file-list="icofileList"
								@change="e => icohandleChange(e, 'Ico')"
							>
								<div v-if="icofileList.length < 1" :disabled="showstate">
									<!-- <a-icon type="plus" /> -->
									<!-- <div class="ant-upload-text">Upload</div> -->
									<a-button>
										<a-icon type="upload" />
										上传
									</a-button>
								</div>
							</a-upload>
						</a-form-item>
						<a-form-item class="fixed-bottom" :wrapper-col="{ span: 12, offset: 5 }"><a-button type="primary" html-type="submit">确定</a-button></a-form-item>
					</a-form>
				</div>
				<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import Func from '@/utils/func';
import { UserCreditApplyTeacherDoAddFile } from '@/api/follow';
const data = [];
export default {
	components: {},
	props: {
		ID: String
	},
	watch: {
		time: {
			handler(ID) {},
			immediate: true
		}
	},
	data() {
		return {
			icofileList: [],
			fileList: {},
			previewVisible: false,
			previewImage: '',
			fileList1: [],
			previewVisible1: false,
			previewImage1: '',
			data,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			showstate: true,
			formValue: {},
			dataValue: {},
			rules: {},
			ActivityTypeList: [],
			requestUrl: this.global.requestUrl
		};
	},
	computed: {},
	created() {},
	mounted() {},
	methods: {
		moment,
		closeFunction(data) {
			this.icofileList = [];
			this.form.resetFields();
			this.$emit('closeFun', data);
		},
		handleCancel() {
			this.previewVisible = false;
			this.previewImage = '';
		},
		async handlePreview(file) {
			this.previewImage = this.requestUrl + file.response.url;
			window.open(this.previewImage, '_blank')
			// let nameType = file.name.substr(file.name.lastIndexOf('.') + 1)
			// if(this.global.imgTypeList.findIndex(m=>{return m==nameType})<0){
			// 	this.$message.error('该文件格式不支持预览')
			// 	return false
			// }
			// this.previewImage = this.requestUrl + file.response.url;
			// this.previewVisible = true;
		},
		icohandleChange({ fileList }, name) {
			this.icofileList = fileList;
		},
		handleChange(info, name) {
			let { fileList } = info;
			const status = info.file.status;
			if (status === 'done') {
				if(info.file.response.code==0){
					this.$message.success(info.file.response.msg)
					this.fileList[name] = [...fileList]; //重点
				}else{
					this.$message.error(info.file.response.msg)
					this.fileList[name] = this.fileList[name].splice(this.fileList[name].length-1,1)
				}
			}
			this.fileList[name] = [...fileList]; //重点
		},
		dataChange(e, name, type) {
			if (type == 'data') {
				let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
				this.dataValue = Object.assign(this.dataValue, { [name]: time });
			} else {
				let time = moment(e).format('HH:mm:ss');
				this.dataValue = Object.assign(this.dataValue, { [name]: time });
			}
		},
		handleSubmit(e) {
			let that = this;
			e.preventDefault();
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = {};
					let arr1 = [];
					data.CreditApplyID = this.ID;
					for (let m = 0; m < this.icofileList.length; m++) {
						if (this.icofileList[m].url) {
							if (this.icofileList[m].url.indexOf(this.requestUrl) > -1) {
								this.icofileList[m].url = this.icofileList[m].url.substring(this.requestUrl.length);
							}
							arr1.push(this.icofileList[m].url);
						} else {
							arr1.push(this.icofileList[m].response.url);
						}
					}
					data.FilePath = arr1.join(',');
					data.FileName = values.FileName;
					let res = await UserCreditApplyTeacherDoAddFile(data);
					if (res.data.code == 0) {
						this.$emit('closeFun');
						that.$message.success(res.data.msg);
					} else {
						that.$message.error(res.data.msg);
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
	margin: 20px 50px;
}
/deep/.ant-form-item-label {
	width: 100px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}
/deep/.ant-calendar-picker,
/deep/.ant-time-picker {
	width: 100%;
}
/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
.titletip {
	padding-left: 10px;
	font-size: 12px;
	color: red;
}
</style>
